<template>
  <div id="app" class="app-container">
    <div v-if="!isAuthenticated" class="login-wrapper">
      <div class="login-container">
        <div class="form-header">
          <h2>用户登录</h2>
          <p>欢迎回来，请登录您的账号</p>
        </div>
        <form class="floating-form" @submit.prevent="handleLogin">
          <div class="input-group">
            <input id="username" v-model.trim="loginForm.username" type="text" autocomplete="off" required />
            <label for="username">用户名</label>
            <span class="highlight"></span>
          </div>
          <div class="input-group">
            <input id="password" v-model.trim="loginForm.password" type="password" autocomplete="off" required />
            <label for="password">密码</label>
            <span class="highlight"></span>
          </div>
          <div class="error-message" v-if="errorMsg">{{ errorMsg }}</div>
          <button type="submit" class="submit-btn" :disabled="!isFormValid">
            <span>登录</span>
            <i class="arrow-icon"></i>
          </button>
          <div class="form-footer">
            <span>还没有账号？</span>
            <a href="#" @click.prevent="showRegister = true">立即注册</a>
          </div>
        </form>
      </div>
    </div>

    <div v-if="isAuthenticated">
      <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
          <div class="flex items-center space-x-2">
            <i class="fa fa-university text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-primary"><router-link to="/home"> 学校教职工管理系统 </router-link> </h1>
          </div>

          <div class="flex items-center space-x-4">
            <div class="flex items-center space-x-2">
              <img src="https://picsum.photos/id/1005/200/200" alt="用户头像"
                   class="w-8 h-8 rounded-full object-cover">
              <span class="hidden sm:inline-block">{{ user.name }}</span>
              <button @click="logout" class="ml-4 text-gray-500 hover:text-gray-700">
                <i class="fas fa-sign-out-alt"></i> 退出
              </button>
            </div>
          </div>
        </div>
      </header>

      <!-- 主体内容区域 -->
      <div class="main-content">
        <!-- 左侧导航栏 -->
        <aside class="sidebar">
          <Sidebar />
        </aside>

        <!-- 右侧内容区域 -->
        <main class="content-box">
          <router-view/>
        </main>
      </div>
    </div>
  </div>
</template>

<script setup>
import Sidebar from './components/Sidebar.vue'
import { ref, reactive, computed, onMounted } from "vue";
import { useRouter } from 'vue-router';

const router = useRouter();
const isAuthenticated = ref(false);
const showRegister = ref(false);
const user = reactive({
  name: '',
  role: ''
});

// 表单数据
const loginForm = reactive({
  username: '',
  password: ''
});

const errorMsg = ref('');
const isFormValid = computed(() => {
  return loginForm.username.length > 0 && loginForm.password.length >= 6;
});

// 登录处理
const handleLogin = async () => {
  if (!isFormValid.value) {
    errorMsg.value = '请输入有效的用户名和密码';
    setTimeout(() => errorMsg.value = '', 3000);
    return;
  }

  try {
    console.log(loginForm);
    const response =await fetch('/api/Login', {
    method: 'POST',
        headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(loginForm)
    })
    const data = await response.json()

    if (data.code === 200) {
      // 成功响应
      isAuthenticated.value = true;
      user.name = loginForm.username;
      user.role = data.data.role;
      // 存储登录状态
      console.log(data.code);
      localStorage.setItem('isAuthenticated', 'true');
      localStorage.setItem('user', JSON.stringify(user));
    }
    else{
      errorMsg("没有用户")
    }
  } catch (error) {
    errorMsg.value = '登录失败，请检查用户名和密码';
    setTimeout(() => errorMsg.value = '', 3000);
  }
};

// 退出登录
const logout = () => {
  isAuthenticated.value = false;
  loginForm.username = '';
  loginForm.password = '';
  localStorage.removeItem('isAuthenticated');
  localStorage.removeItem('user');
  router.push('/');
};

// 检查本地存储中的登录状态
onMounted(() => {
  const auth = localStorage.getItem('isAuthenticated');
  const savedUser = localStorage.getItem('user');

  if (auth === 'true' && savedUser) {
    isAuthenticated.value = true;
    Object.assign(user, JSON.parse(savedUser));
  }
});
</script>

<style scoped>
/* 原有样式保持不变 */
.login-wrapper {
  min-height: 93.5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.login-container {
  width: 100%;
  max-width: 480px;
  background: white;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.form-header {
  text-align: center;
  margin-bottom: 40px;
}

.form-header h2 {
  color: #2c3e50;
  font-size: 32px;
  margin-bottom: 10px;
  font-weight: 700;
}

.form-header p {
  color: #95a5a6;
  font-size: 16px;
}

.floating-form .input-group {
  position: relative;
  margin-bottom: 30px;
}

.input-group input {
  width: 100%;
  padding: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: transparent;
}

.input-group label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  padding: 0 5px;
  color: #95a5a6;
  font-size: 16px;
  transition: all 0.3s ease;
  pointer-events: none;
}

.input-group input:focus,
.input-group input:valid {
  border-color: #3498db;
}

.input-group input:focus + label,
.input-group input:valid + label {
  top: 0;
  font-size: 14px;
  color: #3498db;
}

.submit-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(to right, #3498db, #2980b9);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.submit-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.arrow-icon {
  border: solid white;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
}

.form-footer {
  text-align: center;
  margin-top: 20px;
  color: #95a5a6;
}

.form-footer a {
  color: #3498db;
  text-decoration: none;
  margin-left: 5px;
  font-weight: 600;
}

.form-footer a:hover {
  text-decoration: underline;
}

.error-message {
  color: #f56c6c;
  font-size: 14px;
  text-align: center;
  margin-bottom: 20px;
}

@media (max-width: 480px) {
  .login-container {
    padding: 20px;
  }

  .form-header h2 {
    font-size: 24px;
  }

  .input-group input {
    padding: 12px;
  }
}

@media (max-width: 768px) {
  .login-container {
    max-width: 400px;
    padding: 30px;
  }

  .form-header h2 {
    font-size: 28px;
  }

  .form-header p {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 20px;
    margin: 10px;
    max-width: 100%;
  }

  .form-header h2 {
    font-size: 24px;
  }

  .form-header p {
    font-size: 14px;
  }

  .input-group input {
    padding: 12px;
    font-size: 14px;
  }

  .input-group label {
    font-size: 14px;
  }

  .submit-btn {
    padding: 12px;
    font-size: 16px;
  }
}

@media (max-width: 320px) {
  .login-container {
    padding: 15px;
  }

  .form-header h2 {
    font-size: 20px;
  }

  .input-group {
    margin-bottom: 20px;
  }
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  display: flex;
  flex: 1;
}

.content-box {
  flex: 1;
  padding: 1.5rem;
  border-radius: 4px;
  margin: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sidebar {
  width: 250px;
  min-height: calc(100vh - 60px);
  background: #f8f9fa;
  position: sticky;
  top: 60px;
}
</style>